From caae40f802757df43a59cb7ab2e16581ccafe3f6 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 30 Mar 2021 11:19:44 -0300
Subject: [PATCH 1/4] feature: EthHashInfo add custom avatar

---
 .../EthHashInfo/ethHashInfo.stories.tsx       | 16 ++++++---
 src/ethereum/EthHashInfo/index.tsx            | 34 ++++++++++++-------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index 5ec2f8fc..9a971b8d 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
@@ -25,15 +25,23 @@ 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} avatar shortenHash={4} />
+);
+
+export const WithCustomAvatar = (): React.ReactElement => (
+  <EthHashInfo
+    hash={hash}
+    avatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
+    shortenHash={4}
+  />
 );
 
 export const WithButtons = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
     name="Owner 1"
-    showIdenticon
+    avatar
     showCopyBtn
     explorerUrl={() => ({ alt: explorerUrlAlt, url: explorerUrl })}
     shortenHash={4}
@@ -49,7 +57,7 @@ export const WithMenu = (): React.ReactElement => {
     <EthHashInfo
       hash={hash}
       name="Owner 1"
-      showIdenticon
+      avatar
       showCopyBtn
       menuItems={items}
       shortenHash={4}
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 716d5720..1d3d7abd 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -18,7 +18,7 @@ const StyledContainer = styled.div`
   align-items: center;
 `;
 
-const IdenticonContainer = styled.div`
+const AvatarContainer = styled.div`
   display: flex;
   margin-right: 8px;
 `;
@@ -39,15 +39,21 @@ 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;
+  avatar?: boolean | string;
+  avatarSize?: ThemeIdenticonSize;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];
   explorerUrl?: ExplorerInfo;
@@ -58,19 +64,23 @@ const EthHashInfo = ({
   name,
   textColor = 'text',
   textSize = 'lg',
-  identiconSize = 'md',
   className,
   shortenHash,
-  showIdenticon,
+  avatar,
+  avatarSize = 'md',
   showCopyBtn,
   menuItems,
   explorerUrl,
 }: Props): React.ReactElement => (
   <StyledContainer className={className}>
-    {showIdenticon && (
-      <IdenticonContainer>
-        <Identicon address={hash} size={identiconSize} />
-      </IdenticonContainer>
+    {avatar && (
+      <AvatarContainer>
+        {typeof avatar === 'boolean' ? (
+          <Identicon address={hash} size={avatarSize} />
+        ) : (
+          <StyledImg src={avatar as string} size={avatarSize} />
+        )}
+      </AvatarContainer>
     )}
 
     <InfoContainer>

From e0d9aed6688c8df9e6bc0c0e07b4a6edd4f3a452 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 30 Mar 2021 12:12:55 -0300
Subject: [PATCH 2/4] replace avatar with withAvatar

---
 src/ethereum/EthHashInfo/ethHashInfo.stories.tsx |  8 ++++----
 src/ethereum/EthHashInfo/index.tsx               | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index 9a971b8d..2e329554 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
@@ -26,13 +26,13 @@ export const WithName = (): React.ReactElement => (
 );
 
 export const WithDefaultAvatar = (): React.ReactElement => (
-  <EthHashInfo hash={hash} avatar shortenHash={4} />
+  <EthHashInfo hash={hash} withAvatar shortenHash={4} />
 );
 
 export const WithCustomAvatar = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
-    avatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
+    withAvatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
     shortenHash={4}
   />
 );
@@ -41,7 +41,7 @@ export const WithButtons = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
     name="Owner 1"
-    avatar
+    withAvatar
     showCopyBtn
     explorerUrl={() => ({ alt: explorerUrlAlt, url: explorerUrl })}
     shortenHash={4}
@@ -57,7 +57,7 @@ export const WithMenu = (): React.ReactElement => {
     <EthHashInfo
       hash={hash}
       name="Owner 1"
-      avatar
+      withAvatar
       showCopyBtn
       menuItems={items}
       shortenHash={4}
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 1d3d7abd..fa41bef4 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -52,7 +52,7 @@ type Props = {
   name?: string;
   textColor?: ThemeColors;
   textSize?: ThemeTextSize;
-  avatar?: boolean | string;
+  withAvatar?: boolean | string;
   avatarSize?: ThemeIdenticonSize;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];
@@ -66,19 +66,19 @@ const EthHashInfo = ({
   textSize = 'lg',
   className,
   shortenHash,
-  avatar,
+  withAvatar,
   avatarSize = 'md',
   showCopyBtn,
   menuItems,
   explorerUrl,
 }: Props): React.ReactElement => (
   <StyledContainer className={className}>
-    {avatar && (
+    {withAvatar && (
       <AvatarContainer>
-        {typeof avatar === 'boolean' ? (
+        {typeof withAvatar === 'boolean' ? (
           <Identicon address={hash} size={avatarSize} />
         ) : (
-          <StyledImg src={avatar as string} size={avatarSize} />
+          <StyledImg src={withAvatar as string} size={avatarSize} />
         )}
       </AvatarContainer>
     )}

From 1bbd40f032afbfb648ebd1726a72afb8d103c8eb Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 30 Mar 2021 13:34:36 -0300
Subject: [PATCH 3/4] withAvatar: allow undefiend value

---
 src/ethereum/EthHashInfo/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index fa41bef4..980b0e2f 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -52,7 +52,7 @@ type Props = {
   name?: string;
   textColor?: ThemeColors;
   textSize?: ThemeTextSize;
-  withAvatar?: boolean | string;
+  withAvatar?: boolean | string | undefined;
   avatarSize?: ThemeIdenticonSize;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];

From 42d651e46dc401a482cbc467c2e6090cce009fff Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 31 Mar 2021 17:22:21 -0300
Subject: [PATCH 4/4] rename props

---
 src/ethereum/EthHashInfo/ethHashInfo.stories.tsx |  9 +++++----
 src/ethereum/EthHashInfo/index.tsx               | 14 ++++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
index 2e329554..d36a06a9 100644
--- a/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
+++ b/src/ethereum/EthHashInfo/ethHashInfo.stories.tsx
@@ -26,13 +26,14 @@ export const WithName = (): React.ReactElement => (
 );
 
 export const WithDefaultAvatar = (): React.ReactElement => (
-  <EthHashInfo hash={hash} withAvatar shortenHash={4} />
+  <EthHashInfo hash={hash} showAvatar shortenHash={4} />
 );
 
 export const WithCustomAvatar = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
-    withAvatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
+    showAvatar
+    customAvatar="https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png"
     shortenHash={4}
   />
 );
@@ -41,7 +42,7 @@ export const WithButtons = (): React.ReactElement => (
   <EthHashInfo
     hash={hash}
     name="Owner 1"
-    withAvatar
+    showAvatar
     showCopyBtn
     explorerUrl={() => ({ alt: explorerUrlAlt, url: explorerUrl })}
     shortenHash={4}
@@ -57,7 +58,7 @@ export const WithMenu = (): React.ReactElement => {
     <EthHashInfo
       hash={hash}
       name="Owner 1"
-      withAvatar
+      showAvatar
       showCopyBtn
       menuItems={items}
       shortenHash={4}
diff --git a/src/ethereum/EthHashInfo/index.tsx b/src/ethereum/EthHashInfo/index.tsx
index 980b0e2f..4895d135 100644
--- a/src/ethereum/EthHashInfo/index.tsx
+++ b/src/ethereum/EthHashInfo/index.tsx
@@ -52,7 +52,8 @@ type Props = {
   name?: string;
   textColor?: ThemeColors;
   textSize?: ThemeTextSize;
-  withAvatar?: boolean | string | undefined;
+  showAvatar?: boolean;
+  customAvatar?: string;
   avatarSize?: ThemeIdenticonSize;
   showCopyBtn?: boolean;
   menuItems?: EllipsisMenuItem[];
@@ -66,19 +67,20 @@ const EthHashInfo = ({
   textSize = 'lg',
   className,
   shortenHash,
-  withAvatar,
+  showAvatar,
+  customAvatar,
   avatarSize = 'md',
   showCopyBtn,
   menuItems,
   explorerUrl,
 }: Props): React.ReactElement => (
   <StyledContainer className={className}>
-    {withAvatar && (
+    {showAvatar && (
       <AvatarContainer>
-        {typeof withAvatar === 'boolean' ? (
-          <Identicon address={hash} size={avatarSize} />
+        {customAvatar ? (
+          <StyledImg src={customAvatar} size={avatarSize} />
         ) : (
-          <StyledImg src={withAvatar as string} size={avatarSize} />
+          <Identicon address={hash} size={avatarSize} />
         )}
       </AvatarContainer>
     )}