diff --git a/wallet-extension/src/features/components/wallet/home/TokenTab.tsx b/wallet-extension/src/features/components/wallet/home/TokenTab.tsx index 2d6c6681d..7f952a374 100644 --- a/wallet-extension/src/features/components/wallet/home/TokenTab.tsx +++ b/wallet-extension/src/features/components/wallet/home/TokenTab.tsx @@ -1,5 +1,5 @@ import type { Hex } from "@nilfoundation/niljs"; -import { Button, COLORS, HeadingMedium, ParagraphSmall } from "@nilfoundation/ui-kit"; +import { Button, COLORS, CopyButton, HeadingMedium, ParagraphSmall } from "@nilfoundation/ui-kit"; import { useStore } from "effector-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -12,7 +12,13 @@ import { $tokens, getBalanceForToken, } from "../../../store/model/token.ts"; -import { convertWeiToEth, formatAddress, getTokenIcon, getTokens } from "../../../utils"; +import { + convertWeiToEth, + formatAddress, + getTokenIcon, + getTokens, + isMockToken, +} from "../../../utils"; import { Box, Icon } from "../../shared"; export const TokenTab = () => { @@ -20,6 +26,7 @@ export const TokenTab = () => { const balanceToken = useStore($balanceToken); const allTokens = useStore($tokens); const [clicked, setClicked] = useState(false); + const [hoveredIndex, setHoveredIndex] = useState(null); const { t } = useTranslation("translation"); const navigate = useNavigate(); const availableTokens = getTokens(allTokens, true); @@ -46,7 +53,7 @@ export const TokenTab = () => { return { icon: getTokenIcon(token.label), title: token.label, - subtitle: token.label !== "" ? "Mock token" : formatAddress(token.address as Hex), + subtitle: isMockToken(token.label) ? "Mock token" : formatAddress(token.address as Hex), subtitleColor: "gray", rightText: `${amount.toString()} ${token.label}`, rightTextColor: COLORS.gray50, @@ -86,7 +93,12 @@ export const TokenTab = () => { flexDirection: "row", width: "100%", padding: "5px", + cursor: "pointer", + backgroundColor: hoveredIndex === index ? COLORS.gray800 : "transparent", + transition: "background-color 0.3s", }} + onMouseEnter={() => setHoveredIndex(index)} + onMouseLeave={() => setHoveredIndex(null)} > { onClick={() => { if (token.title === "") { handleCopy(token.address); - setClicked(true); // Update state when clicked - setTimeout(() => setClicked(false), 2000); // Reset after 2 seconds + setClicked(true); + setTimeout(() => setClicked(false), 2000); } }} $style={{ @@ -131,7 +143,16 @@ export const TokenTab = () => { }, }} > - {clicked && token.title === "" ? "Copied" : token.subtitle} + {hoveredIndex === index && token.address ? ( + <> + {formatAddress(token.address as Hex)} + + + ) : clicked && token.title === "" ? ( + "Copied" + ) : ( + token.subtitle + )} diff --git a/wallet-extension/src/features/utils/index.ts b/wallet-extension/src/features/utils/index.ts index d9d6230a3..4423705f8 100644 --- a/wallet-extension/src/features/utils/index.ts +++ b/wallet-extension/src/features/utils/index.ts @@ -5,6 +5,7 @@ export { convertWeiToEth, getTokenIcon, getTokens, + isMockToken, } from "./token.ts"; export { diff --git a/wallet-extension/src/features/utils/token.ts b/wallet-extension/src/features/utils/token.ts index fed64394a..084933d69 100644 --- a/wallet-extension/src/features/utils/token.ts +++ b/wallet-extension/src/features/utils/token.ts @@ -46,6 +46,19 @@ export const getTokenIcon = (name: string) => { } }; +// Return if token is mock or custom +export const isMockToken = (name: string): boolean => { + switch (name) { + case TokenNames.NIL: + case TokenNames.USDT: + case TokenNames.BTC: + case TokenNames.ETH: + return true; + default: + return false; + } +}; + export function getTokens( tokens: { name: string; address: string; show: boolean }[], onlyActive: boolean,