Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

feature: EthHashInfo add custom avatar #112

Merged
merged 4 commits into from
Mar 31, 2021
Merged

feature: EthHashInfo add custom avatar #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
caae40f
feature: EthHashInfo add custom avatar
nicosampler Mar 30, 2021
e0d9aed
replace avatar with withAvatar
nicosampler Mar 30, 2021
1bbd40f
withAvatar: allow undefiend value
nicosampler Mar 30, 2021
42d651e
rename props
nicosampler Mar 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,24 @@ export const WithName = (): React.ReactElement => (
<EthHashInfo hash={hash} name="Owner 1" />
);

export const WithIdenticon = (): React.ReactElement => (
<EthHashInfo hash={hash} showIdenticon shortenHash={4} />
export const WithDefaultAvatar = (): React.ReactElement => (
<EthHashInfo hash={hash} showAvatar shortenHash={4} />
);

export const WithCustomAvatar = (): React.ReactElement => (
<EthHashInfo
hash={hash}
showAvatar
customAvatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
shortenHash={4}
/>
);

export const WithButtons = (): React.ReactElement => (
<EthHashInfo
hash={hash}
name="Owner 1"
showIdenticon
showAvatar
showCopyBtn
explorerUrl={() => ({ alt: explorerUrlAlt, url: explorerUrl })}
shortenHash={4}
Expand All @@ -49,7 +58,7 @@ export const WithMenu = (): React.ReactElement => {
<EthHashInfo
hash={hash}
name="Owner 1"
showIdenticon
showAvatar
showCopyBtn
menuItems={items}
shortenHash={4}
Expand Down
36 changes: 24 additions & 12 deletions src/ethereum/EthHashInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const StyledContainer = styled.div`
align-items: center;
`;

const IdenticonContainer = styled.div`
const AvatarContainer = styled.div`
display: flex;
margin-right: 8px;
`;
Expand All @@ -39,15 +39,22 @@ const AddressContainer = styled.div`
}
`;

const StyledImg = styled.img<{ size: ThemeIdenticonSize }>`
height: ${({ size, theme }) => theme.identicon.size[size]};
width: ${({ size, theme }) => theme.identicon.size[size]};
border-radius: 50%;
`;

type Props = {
className?: string;
hash: string;
textColor?: ThemeColors;
textSize?: ThemeTextSize;
identiconSize?: ThemeIdenticonSize;
shortenHash?: number;
className?: string;
name?: string;
showIdenticon?: boolean;
textColor?: ThemeColors;
textSize?: ThemeTextSize;
showAvatar?: boolean;
customAvatar?: string;
avatarSize?: ThemeIdenticonSize;
showCopyBtn?: boolean;
menuItems?: EllipsisMenuItem[];
explorerUrl?: ExplorerInfo;
Expand All @@ -58,19 +65,24 @@ const EthHashInfo = ({
name,
textColor = 'text',
textSize = 'lg',
identiconSize = 'md',
className,
shortenHash,
showIdenticon,
showAvatar,
customAvatar,
avatarSize = 'md',
showCopyBtn,
menuItems,
explorerUrl,
}: Props): React.ReactElement => (
<StyledContainer className={className}>
{showIdenticon && (
<IdenticonContainer>
<Identicon address={hash} size={identiconSize} />
</IdenticonContainer>
{showAvatar && (
<AvatarContainer>
{customAvatar ? (
<StyledImg src={customAvatar} size={avatarSize} />
) : (
<Identicon address={hash} size={avatarSize} />
)}
</AvatarContainer>
)}

<InfoContainer>
Expand Down