-
Notifications
You must be signed in to change notification settings - Fork 428
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: prevent key prop warning in EthHashInfo (#2351)
* Fix: prevent key prop warning in EthHashInfo Fix: prevent key prop warning in EthHashInfo Fix: prevent key prop warning in EthHashInfo * Fix tests * PR comments
- Loading branch information
Showing
17 changed files
with
262 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/components/common/EthHashInfo/SrcEthHashInfo/CopyAddressButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import CopyButton from '../../CopyButton' | ||
|
|
||
| type CopyAddressButtonProps = { | ||
| prefix?: string | ||
| address: string | ||
| copyPrefix?: boolean | ||
| } | ||
|
|
||
| const CopyAddressButton = ({ prefix, address, copyPrefix }: CopyAddressButtonProps): React.ReactElement => { | ||
| const addressText = copyPrefix && prefix ? `${prefix}:${address}` : address | ||
| return <CopyButton text={addressText} /> | ||
| } | ||
|
|
||
| export default CopyAddressButton |
96 changes: 96 additions & 0 deletions
96
src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import type { ReactNode, ReactElement } from 'react' | ||
| import { isAddress } from 'ethers/lib/utils' | ||
| import { useTheme } from '@mui/material/styles' | ||
| import Box from '@mui/material/Box' | ||
| import useMediaQuery from '@mui/material/useMediaQuery' | ||
| import Identicon from '../../Identicon' | ||
| import CopyAddressButton from '../../CopyAddressButton' | ||
| import ExplorerButton, { type ExplorerButtonProps } from '../../ExplorerButton' | ||
| import { shortenAddress } from '@/utils/formatters' | ||
| import ImageFallback from '../../ImageFallback' | ||
| import css from './styles.module.css' | ||
|
|
||
| export type EthHashInfoProps = { | ||
| address: string | ||
| chainId?: string | ||
| name?: string | null | ||
| showAvatar?: boolean | ||
| showCopyButton?: boolean | ||
| prefix?: string | ||
| showPrefix?: boolean | ||
| copyPrefix?: boolean | ||
| shortAddress?: boolean | ||
| customAvatar?: string | ||
| hasExplorer?: boolean | ||
| avatarSize?: number | ||
| children?: ReactNode | ||
| ExplorerButtonProps?: ExplorerButtonProps | ||
| } | ||
|
|
||
| const SrcEthHashInfo = ({ | ||
| address, | ||
| customAvatar, | ||
| prefix = '', | ||
| copyPrefix, | ||
| showPrefix, | ||
| shortAddress = true, | ||
| showAvatar = true, | ||
| avatarSize, | ||
| name, | ||
| showCopyButton, | ||
| hasExplorer, | ||
| ExplorerButtonProps, | ||
| children, | ||
| }: EthHashInfoProps): ReactElement => { | ||
| const shouldPrefix = isAddress(address) | ||
| const theme = useTheme() | ||
| const isMobile = useMediaQuery(theme.breakpoints.down('sm')) | ||
|
|
||
| const identicon = <Identicon address={address} size={avatarSize} /> | ||
|
|
||
| return ( | ||
| <div className={css.container}> | ||
| {showAvatar && ( | ||
| <div | ||
| className={css.avatarContainer} | ||
| style={avatarSize ? { width: `${avatarSize}px`, height: `${avatarSize}px` } : undefined} | ||
| > | ||
| {customAvatar ? ( | ||
| <ImageFallback src={customAvatar} fallbackComponent={identicon} width={avatarSize} height={avatarSize} /> | ||
| ) : ( | ||
| identicon | ||
| )} | ||
| </div> | ||
| )} | ||
|
|
||
| <Box overflow="hidden"> | ||
| {name && ( | ||
| <Box sx={{ fontSize: 'body2' }} textOverflow="ellipsis" overflow="hidden" title={name}> | ||
| {name} | ||
| </Box> | ||
| )} | ||
|
|
||
| <div className={css.addressContainer}> | ||
| <Box fontWeight="inherit" fontSize="inherit"> | ||
| {showPrefix && shouldPrefix && prefix && <b>{prefix}:</b>} | ||
| <span>{shortAddress || isMobile ? shortenAddress(address) : address}</span> | ||
| </Box> | ||
|
|
||
| {showCopyButton && ( | ||
| <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldPrefix && copyPrefix} /> | ||
| )} | ||
|
|
||
| {hasExplorer && ExplorerButtonProps && ( | ||
| <Box color="border.main"> | ||
| <ExplorerButton {...ExplorerButtonProps} /> | ||
| </Box> | ||
| )} | ||
|
|
||
| {children} | ||
| </div> | ||
| </Box> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SrcEthHashInfo |
22 changes: 22 additions & 0 deletions
22
src/components/common/EthHashInfo/SrcEthHashInfo/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| .container { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5em; | ||
| line-height: 1.4; | ||
| } | ||
|
|
||
| .avatarContainer { | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .avatarContainer > * { | ||
| width: 100% !important; | ||
| height: 100% !important; | ||
| } | ||
|
|
||
| .addressContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.25em; | ||
| white-space: nowrap; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import type { ReactElement, ComponentType } from 'react' | ||
| import { IconButton, SvgIcon, Tooltip } from '@mui/material' | ||
| import LinkIcon from '@/public/images/common/link.svg' | ||
|
|
||
| export type ExplorerButtonProps = { | ||
| title?: string | ||
| href?: string | ||
| className?: string | ||
| icon?: ComponentType | ||
| } | ||
|
|
||
| const ExplorerButton = ({ title = '', href = '', icon = LinkIcon, className }: ExplorerButtonProps): ReactElement => ( | ||
| <Tooltip title={title} placement="top"> | ||
| <IconButton | ||
| className={className} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| href={href} | ||
| size="small" | ||
| sx={{ color: 'inherit' }} | ||
| > | ||
| <SvgIcon component={icon} inheritViewBox fontSize="small" /> | ||
| </IconButton> | ||
| </Tooltip> | ||
| ) | ||
|
|
||
| export default ExplorerButton |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.