fix: review comments

Author: DanielSchiavini

apps/main/src/dex/components/PagePool/components/DetailInfoEstLpTokens.tsx

@@ -34,7 +34,6 @@ const DetailInfoEstLpTokens = ({
       isBold
       loading={formLpTokenExpected.loading}
       loadingSkeleton={[85, 23]}
-      className={formLpTokenExpected.expected.length > 20 ? 'isRow' : ''}
       label={t`Minimum LP Tokens:`}
       tooltip={
         showTooltip ? (

apps/main/src/loan/components/PageCrvUsdStaking/Statistics/AdvancedDetails.tsx

@@ -20,7 +20,7 @@ const AdvancedDetails = () => (
         label={t`Vault Contract Address`}
         value={shortenAddress(SCRVUSD_VAULT_ADDRESS)}
         link={networks[Chain.Ethereum].scanAddressPath(SCRVUSD_VAULT_ADDRESS)}
-        copy
+        copyValue={SCRVUSD_VAULT_ADDRESS}
         copiedTitle={t`Vault contract address copied!`}
       />
     </Stack>

apps/main/src/loan/components/PagePegKeepers/components/PegKeeperAdvancedDetails.tsx

@@ -53,7 +53,6 @@ export const PegKeeperAdvancedDetails = ({
         label={t`Pool`}
         value={shortenAddress(poolAddress, { digits: 2 })}
         link={getInternalUrl('dex', 'ethereum', `${DEX_ROUTES.PAGE_POOLS}/${poolId}/deposit`)}
-        copy
         copyValue={poolAddress}
         testId={`${testId}-action-info-pool`}
       />
@@ -62,7 +61,6 @@ export const PegKeeperAdvancedDetails = ({
         label={t`Contract`}
         value={shortenAddress(address, { digits: 2 })}
         link={`https://etherscan.io/address/${address}`}
-        copy
         copyValue={address}
         testId={`${testId}-action-info-contract`}
       />

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx

@@ -25,7 +25,7 @@ const MOCK_SKELETON = 10 // Mock value for skeleton to infer some width
 
 export type ActionInfoSize = 'small' | 'medium' | 'large'
 
-export type ActionInfoProps = Pick<StackProps, 'sx' | 'className'> & {
+export type ActionInfoProps = {
   /** Label displayed on the left side */
   label: ReactNode
   /** Custom color for the label text */
@@ -46,11 +46,7 @@ export type ActionInfoProps = Pick<StackProps, 'sx' | 'className'> & {
   prevValueColor?: TypographyProps['color']
   /** URL to navigate to when clicking the external link button */
   link?: string
-  /** Whether the value can be copied. It also requires a `copyValue` or `value` to be a string */
-  copy?: boolean
-  /** Value to be copied.
-   * Example: copy the full address or amount when `value` is formatted.
-   * Defaults to the original value (if it's a string!). */
+  /** Value to be copied (will display a copy button). */
   copyValue?: string
   /** Message displayed in the snackbar title when the value is copied */
   copiedTitle?: string
@@ -66,6 +62,8 @@ export type ActionInfoProps = Pick<StackProps, 'sx' | 'className'> & {
   error?: boolean | Error | null
   /** Test ID for the component */
   testId?: string
+  /** Additional styles */
+  sx?: StackProps['sx']
 }
 
 const labelSize = {
@@ -98,24 +96,22 @@ const ActionInfo = ({
   valueTooltip = '',
   link,
   size = 'medium',
-  copy = false,
-  copyValue: givenCopyValue,
+  copyValue,
   copiedTitle,
   loading = false,
   error = false,
   testId = 'action-info',
-  ...styleProps // sx, className
+  sx,
 }: ActionInfoProps) => {
   const [isSnackbarOpen, openSnackbar, closeSnackbar] = useSwitch(false)
-  const copyValue = (givenCopyValue ?? (typeof value === 'string' ? value : '')).trim()
 
   const copyAndShowSnackbar = useCallback(() => {
-    void copyToClipboard(copyValue)
+    void copyToClipboard(copyValue!.trim())
     openSnackbar()
   }, [copyValue, openSnackbar])
 
   return (
-    <Stack direction="row" alignItems="center" gap={Spacing.sm} data-testid={testId} {...styleProps}>
+    <Stack direction="row" alignItems="center" gap={Spacing.sm} data-testid={testId} sx={sx}>
       <Typography flexGrow={1} variant={labelSize[size]} color={labelColor ?? 'textSecondary'} textAlign="start">
         {label}
       </Typography>
@@ -169,7 +165,7 @@ const ActionInfo = ({
           </Stack>
         </Tooltip>
 
-        {copy && copyValue && (
+        {copyValue && (
           <IconButton size="extraSmall" title={copyValue} onClick={copyAndShowSnackbar} color="primary">
             <ContentCopy />
           </IconButton>

packages/curve-ui-kit/src/shared/ui/stories/ActionInfo.stories.tsx

@@ -45,9 +45,9 @@ const meta: Meta<typeof ActionInfo> = {
       control: 'text',
       description: 'The URL to navigate to when clicking the external link button',
     },
-    copy: {
-      control: 'boolean',
-      description: 'Whether or not the value can be copied',
+    copyValue: {
+      control: 'text',
+      description: 'The value to be copied (will display a copy button)',
     },
     copiedTitle: {
       control: 'text',
@@ -73,7 +73,7 @@ const meta: Meta<typeof ActionInfo> = {
     valueColor: 'textPrimary',
     valueTooltip: 'Contract address',
     link: 'https://etherscan.io/address/0x0655977feb2f289a4ab78af67bab0d17aab84367',
-    copy: true,
+    copyValue: '',
     copiedTitle: 'Contract address copied!',
     size: 'small',
     loading: false,
@@ -172,7 +172,6 @@ export const WithEmptyValueAndSwitch: Story = {
     value: '',
     valueRight: <Switch size="small" />,
     link: '',
-    copy: false,
     size: 'medium',
   },
   parameters: {
@@ -202,7 +201,6 @@ export const WithError: Story = {
   args: {
     error: new Error('Failed to load contract address'),
     size: 'medium',
-    copy: false,
     link: '',
   },
   parameters: {

packages/ui/src/DetailInfo/DetailInfo.tsx

@@ -25,7 +25,6 @@ const VariantToColorMap = {
 
 type Props = {
   children: ReactNode
-  className?: string
   isBold?: boolean | null
   isDivider?: boolean
   isMultiLine?: boolean
@@ -36,19 +35,9 @@ type Props = {
   variant?: Variant
 }
 
-const OldDetailInfo = ({
-  className,
-  isBold,
-  isDivider,
-  label,
-  loading,
-  loadingSkeleton,
-  tooltip,
-  variant,
-  children,
-}: Props) => (
+const OldDetailInfo = ({ isBold, isDivider, label, loading, loadingSkeleton, tooltip, variant, children }: Props) => (
   <Wrapper
-    className={`${className} ${isDivider ? 'divider' : ''}`}
+    className={isDivider ? 'divider' : ''}
     grid
     gridAutoFlow="column"
     gridColumnGap={2}
@@ -67,30 +56,18 @@ const OldDetailInfo = ({
   </Wrapper>
 )
 
-const NewDetailInfo = ({
-  className,
-  isBold,
-  isDivider,
-  label,
-  loading,
-  loadingSkeleton,
-  tooltip,
-  variant,
-  children,
-}: Props) => (
+const NewDetailInfo = ({ isBold, isDivider, label, loading, loadingSkeleton, tooltip, variant, children }: Props) => (
   <>
     {isDivider && <Divider sx={{ marginBlock: Spacing.sm }} />}
     <ActionInfo
-      className={className}
       label={label}
       value={children || '-'}
       valueColor={VariantToColorMap[variant || '']}
       valueTooltip={tooltip}
-      copy={typeof children === 'string'}
       error={variant === 'error'}
       loading={loading && (loadingSkeleton || true)}
       copyValue={typeof children === 'string' ? children : ''}
-      size={isBold ? 'large' : 'medium'}
+      {...(isBold && { sx: { '& .MuiTypography-root': { '&': { fontWeight: 'bold' } } } })}
     />
   </>
 )