review fix

src/app/pages/Home/OtherComponents/Tokens/Tokens.module.css

@@ -1,5 +1,4 @@
-.apyTag {
-  background: #4299e1;
+.tagBase {
   border-radius: 4px;
   font-family: Inter, Helvetica, Arial, Verdana, Tahoma, sans-serif;
   font-style: normal;
@@ -9,10 +8,54 @@
   color: #ffffff;
 }
 
-.apyTag:hover {
+.delegateTag {
+  background: #4299e1;
+}
+
+.delegateTag:hover {
   background-color: #68ADE7;
 }
 
+.kusdTag {
+  background: #3EBD93;
+}
+
+.kusdTag:hover {
+  background-color: #65CAA9;
+}
+
+.tzbtcTag {
+  background: #1373E4;
+}
+
+.tzbtcTag:hover {
+  background-color: #428FE9;
+}
+
+.usdtTag {
+  background: #009393;
+}
+
+.usdtTag:hover {
+  background-color: #52AF95;
+}
+
+.youvesTag {
+  background: #143A3A;
+}
+
+.youvesTag:hover {
+  background-color: #4F6B6B;
+}
+
+.scamTag {
+  background: #C53030;
+}
+
+.scamTag:hover {
+  background-color: #D15A59;
+}
+
 .tokenInfoWidth {
   max-width: 19rem;
 }

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

@@ -1,11 +1,11 @@
-import React, { FC, useState, useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import BigNumber from 'bignumber.js';
 import classNames from 'clsx';
 
 import { Button } from 'app/atoms/Button';
 import type { TokenApyInfo } from 'app/hooks/use-token-apy.hook';
-import { KNOWN_TOKENS_SLUGS, TOKENS_BRAND_COLORS } from 'lib/assets/known-tokens';
+import { KNOWN_TOKENS_SLUGS } from 'lib/assets/known-tokens';
 import { isTruthy, openLink } from 'lib/utils';
 
 import { AssetsSelectors } from '../../../Assets.selectors';
@@ -20,11 +20,17 @@ interface Props {
 const APR = 'APR';
 const APY = 'APY';
 const YOUVES_TOKENS_WITH_APR = [KNOWN_TOKENS_SLUGS.UUSD, KNOWN_TOKENS_SLUGS.UBTC, KNOWN_TOKENS_SLUGS.YOU];
+const TAGS_CLASSNAME_RECORD: Record<string, string> = {
+  [KNOWN_TOKENS_SLUGS.KUSD]: 'kusdTag',
+  [KNOWN_TOKENS_SLUGS.TZBTC]: 'tzbtcTag',
+  [KNOWN_TOKENS_SLUGS.USDT]: 'usdtTag',
+  [KNOWN_TOKENS_SLUGS.UUSD]: 'youvesTag',
+  [KNOWN_TOKENS_SLUGS.UBTC]: 'youvesTag',
+  [KNOWN_TOKENS_SLUGS.YOU]: 'youvesTag'
+};
 
 export const TokenApyTag: FC<Props> = ({ slug, symbol, apyInfo }) => {
-  const [hovered, setHovered] = useState(false);
-
-  const colors = useMemo(() => TOKENS_BRAND_COLORS[slug], [slug]);
+  const tokenClassName = useMemo(() => TAGS_CLASSNAME_RECORD[slug], [slug]);
 
   const label = useMemo(() => (YOUVES_TOKENS_WITH_APR.includes(slug) ? APR : APY), [slug]);
 
@@ -41,12 +47,9 @@ export const TokenApyTag: FC<Props> = ({ slug, symbol, apyInfo }) => {
         e.stopPropagation();
         openLink(link);
       }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
       testID={AssetsSelectors.assetItemApyButton}
       testIDProperties={{ slug, symbol, apyRate: rate }}
-      className={classNames('ml-2 px-2 py-1', modStyles['apyTag'])}
-      style={{ backgroundColor: hovered ? colors.bgHover : colors.bg }}
+      className={classNames('ml-2 px-2 py-1', modStyles['tagBase'], modStyles[tokenClassName])}
     >
       {label}: {displayRate}%
     </Button>

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

@@ -44,7 +44,11 @@ export const DelegateTezosTag = memo(() => {
     () => (
       <Button
         onClick={handleTagClick}
-        className={classNames('inline-flex items-center px-1.5 ml-2 py-1', modStyles['apyTag'])}
+        className={classNames(
+          'inline-flex items-center px-1.5 ml-2 py-1',
+          modStyles['tagBase'],
+          modStyles['delegateTag']
+        )}
         testID={AssetsSelectors.assetItemApyButton}
       >
         APY: 5.6%

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

@@ -1,12 +1,11 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback } 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';
@@ -18,8 +17,6 @@ interface Props {
 }
 
 export const ScamTag = memo<Props>(({ assetSlug }) => {
-  const [hovered, setHovered] = useState(false);
-
   const chainId = useChainId(true)!;
   const { publicKeyHash } = useAccount();
 
@@ -52,18 +49,20 @@ export const ScamTag = memo<Props>(({ assetSlug }) => {
     [chainId, publicKeyHash, confirm]
   );
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      removeToken(assetSlug);
+    },
+    [assetSlug, removeToken]
+  );
+
   return (
     <Button
-      onClick={e => {
-        e.preventDefault();
-        e.stopPropagation();
-        removeToken(assetSlug);
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      onClick={handleClick}
+      className={clsx('uppercase ml-2 px-2 py-1', modStyles['tagBase'], modStyles['scamTag'])}
       testID={AssetsSelectors.assetItemScamButton}
-      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/store/assets/reducer.ts

@@ -1,6 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { persistReducer } from 'redux-persist';
-//import hardSet from 'redux-persist/lib/stateReconciler/hardSet';
 
 import { toTokenSlug } from 'lib/assets';
 import { storageConfig, createTransformsBeforePersist } from 'lib/store';

src/lib/assets/known-tokens.ts

@@ -17,27 +17,13 @@ export namespace KNOWN_TOKENS_SLUGS {
   export const KUSD = toTokenSlug('KT1K9gCRgaLRFKTErYt1wVxA3Frb9FjasjTV', 0);
   export const UUSD = toTokenSlug('KT1XRPEPXbZK25r3Htzp2o1x7xdMMmfocKNW', 0);
   export const QUIPU = toTokenSlug('KT193D4vozYnhGJQVtw7CoxxqphqUEEwK6Vb', 0);
-  export const WWBTC = toTokenSlug('KT18fp5rcTW7mbWDmzFwjLDUhs5MeJmagDSZ', 19);
   export const USDT = toTokenSlug('KT1XnTn74bUtxHfDtBmm2bGZAQfhPbvKWR8o', 0);
   export const UBTC = toTokenSlug('KT1XRPEPXbZK25r3Htzp2o1x7xdMMmfocKNW', 2);
   export const YOU = toTokenSlug('KT1Xobej4mc6XgEjDoJoHtTKgbD1ELMvcQuL', 0);
   export const SIRS = toTokenSlug('KT1AafHA1C1vk959wvHWBispY9Y2f3fxBUUo', 0);
   export const TEMPLE = toTokenSlug(TempleToken.contract, TempleToken.id);
 }
 
-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' },
-  [KNOWN_TOKENS_SLUGS.USDT]: { bg: '#009393', bgHover: '#52AF95' },
-  [KNOWN_TOKENS_SLUGS.UUSD]: YOUVES_COLORS,
-  [KNOWN_TOKENS_SLUGS.UBTC]: YOUVES_COLORS,
-  [KNOWN_TOKENS_SLUGS.YOU]: YOUVES_COLORS
-};
-
 const DEPRECATED_TKEY_METADATA: TokenMetadata = {
   id: '0',
   address: 'KT1WihWRnmzhfebi6zqQ4tvNGiPeVxiGwTi2',