diff --git a/src/custom/components/Identicon/IdenticonMod.tsx b/src/custom/components/Identicon/IdenticonMod.tsx index 5dce6d1566..a8565e99a5 100644 --- a/src/custom/components/Identicon/IdenticonMod.tsx +++ b/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).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(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 ( - - {account && supportsENS ? ( - + + {avatar && fetchable ? ( + setFetchable(false)} /> + ) : ( + + )} + + // TODO: revisit if previous changes should be re-applied + /* + {/!*{account && supportsENS ? (*!/} + {avatar && fetchable ? ( + ) : ( )} - + */ ) } diff --git a/src/custom/components/Identicon/index.tsx b/src/custom/components/Identicon/index.tsx index 17afff149a..9f429d36ed 100644 --- a/src/custom/components/Identicon/index.tsx +++ b/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')};