2139/claim identicon (#2161)

* Modified IdenticonMod to allow passing in account as parameter * Using Identicon component instead of dummy image Co-authored-by: Leandro <[email protected]>
gnosis · Jan 15, 2022 · 4c41c57 · 4c41c57
1 parent d1cd9a6
commit 4c41c57
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/custom/components/Identicon/IdenticonMod.tsx b/src/custom/components/Identicon/IdenticonMod.tsx
@@ -12,8 +12,9 @@ export const StyledIdenticonContainer = styled.div`
   background-color: ${({ theme }) => theme.bg4};
 `
 
-export default function Identicon({ size = 16 }: IdenticonProps) {
-  const { account, library } = useActiveWeb3React()
+export default function Identicon({ account: customAccount, size = 16 }: IdenticonProps) {
+  const { account: chainAccount, library } = useActiveWeb3React()
+  const account = customAccount || chainAccount
 
   // restrict usage of Davatar until it stops sending 3p requests
   // see https://github.com/metaphor-xyz/davatar-helpers/issues/18

diff --git a/src/custom/components/Identicon/index.tsx b/src/custom/components/Identicon/index.tsx
@@ -12,12 +12,13 @@ const Wrapper = styled.div<{ size?: number }>`
 
 export interface IdenticonProps {
   size?: number
+  account?: string
 }
 
-export default function Identicon({ size }: IdenticonProps) {
+export default function Identicon({ account, size }: IdenticonProps) {
   return (
     <Wrapper size={size}>
-      <IdenticonMod size={size} />
+      <IdenticonMod size={size} account={account} />
     </Wrapper>
   )
 }
diff --git a/src/custom/pages/Claim/ClaimNav.tsx b/src/custom/pages/Claim/ClaimNav.tsx
@@ -5,10 +5,7 @@ import { TopNav, ClaimAccount, ClaimAccountButtons } from './styled'
 import { ClaimCommonTypes } from './types'
 import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
-
-// should be updated
-const DUMMY_IDENTICON =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA4ZJREFUeF7t3b1xFUEQReF5Jpj4BCC5CoIgiIFoSEAOyoEsZJEAPiaYojAxtWerWlvzye/96T5zb8/MW83t8enuZQ3+fb2/Dd59/tZffoymf90AMAsBACjAKIEUYDT9a1EACjCKIAUYTT8FWGYBZgHDY3D29noAPcAogXqA0fTrAfQAVgItBU+KEAuYzP5iASyABbCASRFiAZPZfwsW8PB8P7sUNVyA3W9/A8DeCABg7/ovAABAD7AzAxRg5+qvxQI2rz8AAGAdYGsG9ABbl18PsHn5AQAAS8F7M6AH2Lv+poGb1x8AAIjrAPXDhm8//6QafP74LsXX4Onnr19W5R4AALMAA4ACJBGjACl9a7GA+LPm6QTG+gNAD6AHSIOIArRZjCZQE5gGoCYwpU8TmP/LFQtgAWkMWgls31aygIQfC2ABw3sZZgFmAUnDWEBKHwtgAbtbQBxAGaB6/+n46uH1+bMF1Aeoewn1/tPxAIi7idMFrPcHAAAqQymeBaT09WAKQAE6ReEKFCAk74xQCkABzuDo8DUowOHUnRNIASjAOSQdvAoFOJi4s8IoAAU4i6VD16EAh9J2XhAFoADn0XTgShTgQNLODKEAFOBMnl59rawA09u50yPo6u8PgFePmf8DADAs4RTg4t8FxAE4fuoYBaAAleEUXxVQD5DSP3/wIwCGTx9nASwgakgLpwAUIBGkB0jp0wOMf9lTJTDW//LvTwEiAZpATWBEqIVXBaQALf8s4OoSGOsPAAC8VIZSfLaAx6e70TeoL3B1AKef/waANADzbiQA4kredAKvrmAUoAkABYj5u3wCKUAk4OoJvPrzs4DNAQYAAKwDFAZYQMneWprA4c00FrA5wAAAgB6gMKAHKNnTA4xvJ7OAzQEGAABaD1CPfYv5X1c/NWz6/bMCAKCdHQyAmAEK0A6epAARwKsrIAAAoAksDFCAeGxaSf6/WD2AHqAylOIpAAVIANXgqoCawFgBCkABIkItnAJc/PTwVv7eBLOAWAEWwAIiQi2cBbCARBALSOlb6/IW8PB8n/4/QP06tybw16f3sYQt/MP33+kCVcLrbxLH/0cQANpSLgAoQFIgCpDStxYLiJ82sQAWkMagJvDiR8ZQAApAAUIGzALMAgI+a5kFpPSZBeSPG/UAeoA0Bs0CzAISQDXYQpCFoMSQzaD4gxIWwALSCKzBV7eAv6T9ww6D8p2HAAAAAElFTkSuQmCC'
+import Identicon from 'components/Identicon'
 
 type ClaimNavProps = Pick<ClaimCommonTypes, 'account' | 'handleChangeAccount'>
 
@@ -24,7 +21,7 @@ export default function ClaimNav({ account, handleChangeAccount }: ClaimNavProps
     <TopNav>
       <ClaimAccount>
         <div>
-          <img src={DUMMY_IDENTICON} alt={activeClaimAccount} />
+          <Identicon account={activeClaimAccount} size={46} />
           <p>{activeClaimAccountENS ? activeClaimAccountENS : shortenAddress(activeClaimAccount)}</p>
         </div>