From 70cbe027f3b59070be5bbca3a3e7875c8c3c54b7 Mon Sep 17 00:00:00 2001
From: Daniel Sinclair <4412473+DanielSinclair@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:00:32 -0400
Subject: [PATCH] fix: token details info text selection (#1644)

---
 .../components/TextOverflow/TextOverflow.tsx  | 19 ++++++++++------
 .../popup/pages/home/TokenDetails/About.tsx   | 10 +++++++--
 .../pages/home/TokenDetails/PriceChart.tsx    | 22 ++++++++++++-------
 .../pages/home/TokenDetails/TokenDetails.tsx  |  4 ++--
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/design-system/components/TextOverflow/TextOverflow.tsx b/src/design-system/components/TextOverflow/TextOverflow.tsx
index d460296f20..df50659fb2 100644
--- a/src/design-system/components/TextOverflow/TextOverflow.tsx
+++ b/src/design-system/components/TextOverflow/TextOverflow.tsx
@@ -1,8 +1,10 @@
+import clsx from 'clsx';
 import React, { CSSProperties } from 'react';
 
 import { TextStyles, textStyles } from '../../styles/core.css';
 import { Box } from '../Box/Box';
 import { Inset } from '../Inset/Inset';
+import { selectionStyle } from '../Text/Text.css';
 
 interface TextOverflowProps {
   align?: TextStyles['textAlign'];
@@ -37,12 +39,10 @@ export function TextOverflow({
         marginVertical="-8px"
         className={textStyles({
           color,
-          cursor,
           fontFamily: 'rounded',
           fontSize: size,
           fontWeight: weight,
           textAlign: align,
-          userSelect,
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           whiteSpace: 'nowrap',
@@ -53,11 +53,16 @@ export function TextOverflow({
         <Inset vertical="8px">
           <Box
             as={as}
-            style={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
+            className={clsx([
+              textStyles({
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                userSelect,
+                cursor,
+              }),
+              selectionStyle,
+            ])}
           >
             {children}
           </Box>
diff --git a/src/entries/popup/pages/home/TokenDetails/About.tsx b/src/entries/popup/pages/home/TokenDetails/About.tsx
index f78790d84e..a6d81b672d 100644
--- a/src/entries/popup/pages/home/TokenDetails/About.tsx
+++ b/src/entries/popup/pages/home/TokenDetails/About.tsx
@@ -88,7 +88,7 @@ export const InfoRow = ({
       size="12pt"
       weight="semibold"
       cursor="text"
-      userSelect="all"
+      userSelect="text"
     >
       {value}
     </TextOverflow>
@@ -208,7 +208,13 @@ function Description({ text = '' }: { text?: string | null }) {
   if (!text) return null;
   const chunks = chunkLinks(text);
   return (
-    <Text color="labelTertiary" size="14pt" weight="regular">
+    <Text
+      color="labelTertiary"
+      size="14pt"
+      weight="regular"
+      cursor="text"
+      userSelect="text"
+    >
       {chunks.map((chunk, i) => {
         if (chunk.type === 'text') {
           return chunk.value;
diff --git a/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx b/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx
index 195438269f..6be795225b 100644
--- a/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx
+++ b/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx
@@ -47,14 +47,20 @@ const PriceChange = memo(function PriceChange({
   const { color, symbol } = parsePriceChange(+changePercentage.toFixed(2));
   return (
     <Box display="flex" flexDirection="column" gap="10px" alignItems="flex-end">
-      <Text size="16pt" weight="heavy" color={color}>
-        <Inline alignVertical="center" space="4px">
-          {symbol && (
-            <Symbol color={color} size={12} symbol={symbol} weight="heavy" />
-          )}{' '}
+      <Inline alignVertical="center" space="4px">
+        {symbol && (
+          <Symbol color={color} size={12} symbol={symbol} weight="heavy" />
+        )}
+        <Text
+          size="16pt"
+          weight="heavy"
+          color={color}
+          cursor="text"
+          userSelect="text"
+        >
           {Math.abs(changePercentage).toFixed(2)} %
-        </Inline>
-      </Text>
+        </Text>
+      </Inline>
       <Text size="14pt" weight="heavy" color={color}>
         {formatDate(date)}
       </Text>
@@ -84,7 +90,7 @@ const TokenPrice = memo(function TokenPrice({
         justifyContent="center"
         gap="10px"
       >
-        <Text size="16pt" weight="heavy" cursor="text" userSelect="all">
+        <Text size="16pt" weight="heavy" cursor="text" userSelect="text">
           {!isLoading && !hasPriceData && !fallbackPrice
             ? i18n.t('token_details.not_available')
             : formatCurrency(
diff --git a/src/entries/popup/pages/home/TokenDetails/TokenDetails.tsx b/src/entries/popup/pages/home/TokenDetails/TokenDetails.tsx
index 8b47c54dd9..85467b9ed2 100644
--- a/src/entries/popup/pages/home/TokenDetails/TokenDetails.tsx
+++ b/src/entries/popup/pages/home/TokenDetails/TokenDetails.tsx
@@ -142,7 +142,7 @@ function BalanceValue({
             weight="semibold"
             color={color}
             cursor="text"
-            userSelect="all"
+            userSelect="text"
           >
             {hideAssetBalances ? <HiddenValue /> : balance.value}{' '}
             {balance.symbol}
@@ -160,7 +160,7 @@ function BalanceValue({
             color={color}
             align="right"
             cursor="text"
-            userSelect="all"
+            userSelect="text"
           >
             {getPrice(nativeBalance, chainId)}
           </TextOverflow>