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

feature: EthHashInfo add customAvatar fallback #123

Merged
merged 6 commits into from
Apr 26, 2021
Merged

feature: EthHashInfo add customAvatar fallback #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92432e6
test
nicosampler Apr 23, 2021
9af3d17
EthHashIfo: add customAvatarFallback
nicosampler Apr 23, 2021
0d79f78
EthHashInfo: fallback handler
nicosampler Apr 23, 2021
4b40630
Ivan feedback
nicosampler Apr 26, 2021
8d59ad6
update tests
nicosampler Apr 26, 2021
f746b3a
Merge branch 'development' of github.com:gnosis/safe-react-components…
nicosampler Apr 26, 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
19 changes: 19 additions & 0 deletions src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,25 @@ export const WithCustomAvatar = (): React.ReactElement => (
/>
);

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

export const WithCustomAvatarFallbackIdenticon = (): React.ReactElement => (
<EthHashInfo
hash={hash}
showAvatar
customAvatar="https://no-file.png"
shortenHash={4}
/>
);

export const WithButtons = (): React.ReactElement => (
<EthHashInfo
hash={hash}
Expand Down
79 changes: 50 additions & 29 deletions src/ethereum/EthHashInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, SyntheticEvent } from 'react';
import styled from 'styled-components';

import {
Expand Down Expand Up @@ -54,6 +54,7 @@ type Props = {
textSize?: ThemeTextSize;
showAvatar?: boolean;
customAvatar?: string;
customAvatarFallback?: string;
Copy link
Member

@katspaugh katspaugh Apr 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this image always going to be the <> icon? If so, we could just store the SVG in the repo. Or at least use it as the default value.

Copy link
Contributor Author

@nicosampler nicosampler Apr 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are 2 different repositories.
<> is needed at this moment in SRC, but as this lib is also helpful for SApp I would not use it as a default one.

avatarSize?: ThemeIdenticonSize;
showCopyBtn?: boolean;
menuItems?: EllipsisMenuItem[];
Expand All @@ -70,42 +71,62 @@ const EthHashInfo = ({
shortenHash,
showAvatar,
customAvatar,
customAvatarFallback,
avatarSize = 'md',
showCopyBtn,
menuItems,
explorerUrl,
}: Props): React.ReactElement => (
<StyledContainer className={className}>
{showAvatar && (
<AvatarContainer>
{customAvatar ? (
<StyledImg src={customAvatar} size={avatarSize} />
) : (
<Identicon address={hash} size={avatarSize} />
)}
</AvatarContainer>
)}
}: Props): React.ReactElement => {
const [fallbackToIdenticon, setFallbackToIdenticon] = useState(false);
const [fallbackSrc, setFallabckSrc] = useState<undefined | string>(undefined);

const setAppImageFallback = (
error: SyntheticEvent<HTMLImageElement, Event>
): void => {
if (customAvatarFallback && !fallbackToIdenticon) {
setFallabckSrc(customAvatarFallback);
} else {
setFallbackToIdenticon(true);
}
};

<InfoContainer>
{name && (
<Text size={textSize} color={textColor}>
{name}
</Text>
return (
<StyledContainer className={className}>
{showAvatar && (
<AvatarContainer>
{!fallbackToIdenticon && customAvatar ? (
<StyledImg
src={fallbackSrc || customAvatar}
size={avatarSize}
onError={setAppImageFallback}
/>
) : (
<Identicon address={hash} size={avatarSize} />
)}
</AvatarContainer>
)}
<AddressContainer>
{showHash && (

<InfoContainer>
{name && (
<Text size={textSize} color={textColor}>
{shortenHash
? textShortener(hash, shortenHash + 2, shortenHash)
: hash}
{name}
</Text>
)}
{showCopyBtn && <CopyToClipboardBtn textToCopy={hash} />}
{explorerUrl && <ExplorerButton explorerUrl={explorerUrl} />}
{menuItems && <EllipsisMenu menuItems={menuItems} />}
</AddressContainer>
</InfoContainer>
</StyledContainer>
);
<AddressContainer>
{showHash && (
<Text size={textSize} color={textColor}>
{shortenHash
? textShortener(hash, shortenHash + 2, shortenHash)
: hash}
</Text>
)}
{showCopyBtn && <CopyToClipboardBtn textToCopy={hash} />}
{explorerUrl && <ExplorerButton explorerUrl={explorerUrl} />}
{menuItems && <EllipsisMenu menuItems={menuItems} />}
</AddressContainer>
</InfoContainer>
</StyledContainer>
);
};

export default EthHashInfo;
199 changes: 199 additions & 0 deletions tests/__snapshots__/storybook.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7702,6 +7702,7 @@ exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar 1`] = `
>
<img
className="c2"
onError={[Function]}
size="md"
src="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
/>
Expand All @@ -7724,6 +7725,204 @@ exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar 1`] = `
</div>
`;

exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar Fallback 1`] = `
.c5 {
font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif;
color: #001428;
margin: 0;
font-weight: normal;
font-size: 14px;
line-height: 20px;
text-align: start;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: 8px;
}

.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.c4 *:not(:first-child) {
margin-left: 8px;
}

.c2 {
height: 32px;
width: 32px;
}

<div
className="c0"
>
<div
className="c1"
>
<img
className="c2"
onError={[Function]}
size="md"
src="https://broken.png"
/>
</div>
<div
className="c3"
>
<div
className="c4"
>
<p
className="c5"
color="text"
size="lg"
>
0x6990...ba4f
</p>
</div>
</div>
</div>
`;

exports[`Storyshots Ethereum/Eth hash Info With Custom Avatar Fallback Identicon 1`] = `
.c5 {
font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif;
color: #001428;
margin: 0;
font-weight: normal;
font-size: 14px;
line-height: 20px;
text-align: start;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: 8px;
}

.c3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.c4 *:not(:first-child) {
margin-left: 8px;
}

.c2 {
height: 32px;
width: 32px;
}

<div
className="c0"
>
<div
className="c1"
>
<img
className="c2"
onError={[Function]}
size="md"
src="https://no-file.png"
/>
</div>
<div
className="c3"
>
<div
className="c4"
>
<p
className="c5"
color="text"
size="lg"
>
0x6990...ba4f
</p>
</div>
</div>
</div>
`;

exports[`Storyshots Ethereum/Eth hash Info With Default Avatar 1`] = `
.c5 {
font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif;
Expand Down