IdenticonMod update not quite working yet for some reason

src/custom/components/Identicon/IdenticonMod.tsx

@@ -1,34 +1,68 @@
-import Davatar, { Image } from '@davatar/react'
-import { useMemo } from 'react'
+import jazzicon from '@metamask/jazzicon'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import useENSAvatar from 'hooks/useENSAvatar'
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
-import { IdenticonProps } from 'components/Identicon'
 
-import { useActiveWeb3React } from 'hooks/web3'
+// MOD imports
+// import Davatar, { Image } from '@davatar/react'
+import { IdenticonProps } from 'components/Identicon'
 
-export const StyledIdenticonContainer = styled.div`
+export const StyledIdenticon = styled.div`
   height: 1rem;
   width: 1rem;
   border-radius: 1.125rem;
   background-color: ${({ theme }) => theme.bg4};
+  font-size: initial;
+`
+
+const StyledAvatar = styled.img`
+  height: inherit;
+  width: inherit;
+  border-radius: inherit;
 `
 
 export default function Identicon({ account: customAccount, size = 16 }: IdenticonProps) {
-  const { account: chainAccount, library } = useActiveWeb3React()
+  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
-  const supportsENS = useMemo(() => {
-    return ([1, 3, 4, 5] as Array<number | undefined>).includes(library?.network?.chainId)
-  }, [library])
+  const { avatar } = useENSAvatar(account ?? undefined, false)
+  const [fetchable, setFetchable] = useState(true)
 
+  const icon = useMemo(() => account && jazzicon(16, parseInt(account.slice(2, 10), 16)), [account])
+  const iconRef = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => {
+    const current = iconRef.current
+    if (icon) {
+      current?.appendChild(icon)
+      return () => {
+        try {
+          current?.removeChild(icon)
+        } catch (e) {
+          console.error('Avatar icon not found')
+        }
+      }
+    }
+    return
+  }, [icon, iconRef])
+
+  console.log(`identicon`, chainAccount, customAccount, account, avatar, fetchable)
   return (
-    <StyledIdenticonContainer>
-      {account && supportsENS ? (
-        <Davatar address={account} size={size} provider={library} />
+    <StyledIdenticon>
+      {avatar && fetchable ? (
+        <StyledAvatar alt="avatar" src={avatar} onError={() => setFetchable(false)} />
+      ) : (
+        <span ref={iconRef} />
+      )}
+    </StyledIdenticon>
+    // TODO: revisit if previous changes should be re-applied
+    /*<StyledIdenticon>
+      {/!*{account && supportsENS ? (*!/}
+      {avatar && fetchable ? (
+        <Davatar address={avatar} size={size} provider={library} />
       ) : (
         <Image address={account} size={size} />
       )}
-    </StyledIdenticonContainer>
+    </StyledIdenticon>*/
   )
 }

src/custom/components/Identicon/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import IdenticonMod, { StyledIdenticonContainer } from './IdenticonMod'
+import IdenticonMod, { StyledIdenticon } from './IdenticonMod'
 import styled from 'styled-components/macro'
 
 const Wrapper = styled.div<{ size?: number }>`
-  ${StyledIdenticonContainer} {
+  ${StyledIdenticon} {
     height: ${({ size }) => (size ? `${size}px` : '1rem')};
     width: ${({ size }) => (size ? `${size}px` : '1rem')};
     border-radius: ${({ size }) => (size ? `${size}px` : '1rem')};