fix: make addresses clickable (#5040)

* init

* fix

* change color to primary

* fix

* respond to comments

src/nft/components/collection/Activity.css.ts

@@ -98,7 +98,7 @@ export const eventTime = style([
 ])
 
 export const addressCell = style([
-  subhead,
+  buttonTextMedium,
   sprinkles({
     color: 'textPrimary',
     height: 'full',

src/nft/components/collection/Activity.tsx

@@ -39,6 +39,7 @@ interface ActivityProps {
   contractAddress: string
   rarityVerified: boolean
   collectionName: string
+  chainId?: number
 }
 
 const initialFilterState = {
@@ -54,7 +55,7 @@ const reduceFilters = (state: typeof initialFilterState, action: { eventType: Ac
 
 const baseHref = (event: ActivityEvent) => `/#/nfts/asset/${event.collectionAddress}/${event.tokenId}?origin=activity`
 
-export const Activity = ({ contractAddress, rarityVerified, collectionName }: ActivityProps) => {
+export const Activity = ({ contractAddress, rarityVerified, collectionName, chainId }: ActivityProps) => {
   const [activeFilters, filtersDispatch] = useReducer(reduceFilters, initialFilterState)
 
   const {
@@ -162,8 +163,8 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName }: Ac
                   eventTransactionHash={event.transactionHash}
                 />
                 <PriceCell marketplace={event.marketplace} price={event.price} />
-                <AddressCell address={event.fromAddress} />
-                <AddressCell address={event.toAddress} desktopLBreakpoint />
+                <AddressCell address={event.fromAddress} chainId={chainId} />
+                <AddressCell address={event.toAddress} chainId={chainId} desktopLBreakpoint />
                 <BuyCell
                   event={event}
                   collectionName={collectionName}

src/nft/components/collection/ActivityCells.tsx

+import { ChainId } from '@uniswap/smart-order-router'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -26,9 +27,31 @@ import { getTimeDifference, isValidDate } from 'nft/utils/date'
 import { putCommas } from 'nft/utils/putCommas'
 import { fallbackProvider, getRarityProviderLogo } from 'nft/utils/rarity'
 import { MouseEvent, useMemo, useState } from 'react'
+import styled from 'styled-components/macro'
+import { ExternalLink } from 'theme'
+import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import * as styles from './Activity.css'
 
+const AddressLink = styled(ExternalLink)`
+  color: ${({ theme }) => theme.textPrimary};
+  text-decoration: none;
+  a {
+    color: ${({ theme }) => theme.textPrimary};
+    text-decoration: none;
+  }
+  a:hover {
+    color: ${({ theme }) => theme.textPrimary};
+    text-decoration: none;
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+  a:focus {
+    color: ${({ theme }) => theme.textPrimary};
+    text-decoration: none;
+    opacity: ${({ theme }) => theme.opacity.click};
+  }
+`
+
 const formatListingStatus = (status: OrderStatus): string => {
   switch (status) {
     case OrderStatus.EXECUTED:
@@ -102,15 +125,21 @@ export const BuyCell = ({
 interface AddressCellProps {
   address?: string
   desktopLBreakpoint?: boolean
+  chainId?: number
 }
 
-export const AddressCell = ({ address, desktopLBreakpoint }: AddressCellProps) => {
+export const AddressCell = ({ address, desktopLBreakpoint, chainId }: AddressCellProps) => {
   return (
     <Column
       display={{ sm: 'none', xl: desktopLBreakpoint ? 'none' : 'flex', xxl: 'flex' }}
       className={styles.addressCell}
     >
-      <Box>{address ? shortenAddress(address, 2, 4) : '-'}</Box>
+      <AddressLink
+        href={getExplorerLink(chainId ?? ChainId.MAINNET, address ?? '', ExplorerDataType.ADDRESS)}
+        style={{ textDecoration: 'none' }}
+      >
+        <Box onClick={(e) => e.stopPropagation()}>{address ? shortenAddress(address, 2, 4) : '-'}</Box>
+      </AddressLink>
     </Column>
   )
 }

src/nft/components/collection/CollectionStats.css.ts

@@ -76,13 +76,13 @@ globalStyle(`${description} a[href]`, {
 
 globalStyle(`${description} a[href]:hover`, {
   color: `${themeVars.colors.textSecondary}`,
-  opacity: '0.6',
+  opacity: `${themeVars.opacity.hover}`,
   textDecoration: 'none',
 })
 
-globalStyle(`${description} a[href]:active`, {
+globalStyle(`${description} a[href]:focus`, {
   color: `${themeVars.colors.textSecondary}`,
-  opacity: '0.4',
+  opacity: `${themeVars.opacity.pressed}`,
   textDecoration: 'none',
 })
 

src/nft/css/sprinkles.css.ts

@@ -37,6 +37,11 @@ const themeContractValues = {
     deep: '',
     shallow: '',
   },
+
+  opacity: {
+    hover: '0.6',
+    pressed: '0.4',
+  },
 }
 
 export type Theme = typeof themeContractValues

src/nft/pages/collection/index.tsx

@@ -124,6 +124,7 @@ const Collection = () => {
                           contractAddress={contractAddress}
                           rarityVerified={collectionStats?.rarityVerified ?? false}
                           collectionName={collectionStats?.name ?? ''}
+                          chainId={chainId}
                         />
                       )
                     : contractAddress &&

src/nft/themes/darkTheme.ts

@@ -35,4 +35,8 @@ export const darkTheme: Theme = {
     deep: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32)',
     shallow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12)',
   },
+  opacity: {
+    hover: '0.6',
+    pressed: '0.4',
+  },
 }

src/nft/themes/lightTheme.ts

@@ -35,4 +35,8 @@ export const lightTheme: Theme = {
     deep: '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04)',
     shallow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12)',
   },
+  opacity: {
+    hover: '0.6',
+    pressed: '0.4',
+  },
 }